/*
 * @Author       : 魏威 <1209562577@qq.com>
 * @Date         : 2021-09-26 19:25 周0
 * @Description  : 未授权app入口
 */
import { Button, Card, Divider } from 'antd';
import React, { useState } from 'react';
import LoginScreen from './login';
import RegisterScreen from './register';
import styled from '@emotion/styled';
import logoUrl from 'assets/logo.svg';
import leftPicUrl from 'assets/left.svg';
import rightPicUrl from 'assets/right.svg';

export const UnauthenticatedApp = () => {
  const [isRegister, setIsRegister] = useState(false);

  return (
    <Container>
      <Header />
      <Background />
      <ShawdowCard>
        <Title>{isRegister ? '注册' : '登录'}</Title>
        {isRegister ? <RegisterScreen /> : <LoginScreen />}
        <Divider />
        <LongButton type="link" onClick={() => setIsRegister(!isRegister)}>
          {isRegister ? '已经有账号？直接登录' : '没有账号？注册新账号'}
        </LongButton>
      </ShawdowCard>
    </Container>
  );
};

const Header = styled.header`
  background: url(${logoUrl}) no-repeat center;
  width: 100%;
  padding: 5rem 0;
  background-size: 8rem;
`;

const Background = styled.div`
  position: absolute;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: left bottom, right bottom;
  background-size: calc((100vw - 40rem) / 2), calc((100vw - 40rem) / 2), cover;
  background-image: url(${leftPicUrl}), url(${rightPicUrl});
`;

const ShawdowCard = styled(Card)`
  width: 300px;
  display: flex;
  justify-content: center;
  text-align: center;
  border-radius: 0.3rem;
  box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
`;

const Title = styled.h2`
  margin-bottom: 2.4rem;
  color: rgb(94, 108, 132);
`;

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  /* justify-content: center; */
  min-height: 100vh;
`;

export const LongButton = styled(Button)`
  width: 100%;
`;
